<template>
	<section class="roles">
		<el-button type="primary" style="margin-bottom: 10px" @click="addRole">
			新增
		</el-button>
		<el-table :data="tableData">
			<el-table-column prop="authorityId" label="角色ID" />
			<el-table-column prop="authorityName" label="角色名" />
			<el-table-column label="操作" width="300">
				<template #default="scope">
					<el-popconfirm
						title="是否确定删除当前数据"
						width="200px"
						confirm-button-text="确定"
						cancel-button-text="取消"
						@confirm="delRole(scope.row.authorityId)"
					>
						<template #reference>
							<el-button text type="danger"> 删除 </el-button>
						</template>
					</el-popconfirm>
					<el-button type="success" text @click="updateRole(scope.row)">
						修改
					</el-button>
					<el-button
						type="primary"
						text
						@click="setMenuData(scope.row.authorityId)"
					>
						配置菜单
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="visible" title="角色配置" center @close="closeDialog">
			<el-form :model="formData" label-width="120px">
				<el-form-item
					label="角色ID"
					prop="authorityId"
					:rules="[
						{
							required: true,
							message: '角色ID不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input-number
						v-model="formData.authorityId"
						:disabled="operate !== 'new'"
						:controls="false"
					/>
				</el-form-item>
				<el-form-item
					label="角色名称"
					prop="authorityName"
					:rules="[
						{
							required: true,
							message: '角色名称不能为空',
							trigger: 'blur',
						},
					]"
				>
					<el-input v-model="formData.authorityName" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitRole">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<set-menu :id="authorityId" v-model:visible="drawerVisible" />
	</section>
</template>

<script setup>
import useTableData from '@/util/useTableData.js'
import setMenu from './setMenu.vue'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const drawerVisible = ref(false)
const operate = ref('new')
const authorityId = ref(0)

const { tableData, delRow, addRow, updateRow } = useTableData({
	getList: {
		url: '/authority/getAuthorityList',
		params: {
			page: 1,
			pageSize: 999,
		},
	},
})

const formData = reactive({
	authorityName: '',
	authorityId: '',
})

const delRole = (id) => {
	delRow('/authority/deleteAuthority', { authorityId: id })
}

const addRole = () => {
	operate.value = 'new'
	visible.value = true
}

const updateRole = (params) => {
	operate.value = 'update'
	visible.value = true
	Object.assign(formData, params)
}

const closeDialog = () => {
	Object.keys(formData).forEach((item) => {
		if (item === 'authorityName' || item === 'authorityId') {
			formData[item] = ''
		} else {
			delete formData[item]
		}
	})
}

const submitRole = async () => {
	try {
		if (operate.value === 'new') {
			await addRow('/authority/createAuthority', formData)
		} else {
			await updateRow('/authority/updateAuthority', formData)
		}
		closeDialog()
		ElMessage.success('配置成功')
		visible.value = false
	} catch (err) {
		console.log(err)
	}
}

const setMenuData = (id) => {
	drawerVisible.value = true
	authorityId.value = typeof id === 'string' ? Number(id) : id
}
</script>

<style scoped>
.roles {
	padding: 10px 20px;
}
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
:deep(.el-input-number) {
	width: 100%;
}
</style>
